<template>
  <ZwDialog :appDialog="appDialog">
    <div class="public_box">
      <div class="explain_box">
        <slot name="descTitle"></slot>
        <p>当前列表仅展示与当前企业同一主体且认证的服务号（需绑定开放平台） </p>
        <p>如需切换新的公众号，请确保新的公众号与之前公众号同一主体，否则可能部分客服无法关联。</p>
      </div>
      <div v-if="publicList.length != 0">
        <el-scrollbar view-class="public_box" height="400px" ref="myScrollbar">
          <div :class="['public_item', tabIndex == item.id ? 'active' : '']" v-for="item in publicList" :key="item.id" @click="checked(item.id, item)">
            <header class="info">
              <el-image fit="cover" class="avatar" :src="item.head_img">
                <template #error>
                  <div class="image-slot">
                    <el-icon><icon-picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div class="name">
                <p class="name_text">{{ item.nick_name }}</p>
                <el-tag v-if="item.service_type_info == 2" color="#ECF4FB" size="small">服务号</el-tag>
                <el-tag v-if="item.service_type_info == 0 || item.verify_type_info == 1" color="#ECF4FB" size="small">订阅号</el-tag>
              </div>
            </header>
            <div class="property">
              <p class="property_item">
                <img src="@/assets/smartMarketing/drainage/luckyDraw/hint.png" alt="" />
                <span>已认证</span>
              </p>
              <p class="property_item">
                <img src="@/assets/smartMarketing/drainage/luckyDraw/open.png" alt="" />
                <span>已绑定微信开放平台</span>
              </p>
            </div>
            <el-button :class="['btn', item.id == tabIndex ? 'activeBtn' : '']" size="small" :type="item.id == tabIndex ? 'primary' : ''">{{ item.id == tabIndex ? '使用中' : '使用' }}</el-button>
          </div>
          <div class="public_item addNew" @click="goOhterPage">
            <div class="add_content">
              <img class="add_icon" src="@/assets/smartMarketing/drainage/luckyDraw/add.png" alt="" />
              <p class="add_text">添加新的公众号</p>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div v-else class="no_data">
        <img src="@/assets/noData.png" alt="" />
        <p>当前暂无可用已认证公众号，<span class="to_add" @click="onAddOfficeAccount">去添加</span> </p>
      </div>
      <template>
        <el-dialog custom-class="app_dialogadd" top="270px" v-model="innerVisible" width="920px" append-to-body>
          <template #header>
            <div class="dialog_header">添加授权公众号</div>
          </template>
          <div class="empower">
            <div class="empower_image">
              <div class="empower_image_left">
                <img src="@/assets/smartMarketing/Shape.png" alt="" />
              </div>
              <div class="empower_image_center"></div>
              <div class="empower_image_right"></div>
            </div>
            <div class="empower_btn">
              <el-button size="small" type="primary">
                <el-link href="/channelconfig/officeAccount/oaManage" target="_blank" :underline="false">授权公众号</el-link>
              </el-button>
            </div>
            <div class="empower_text">需要公众号管理员 (即公众号注册者) 进行扫码上传哦~</div>
            <div class="empower_border"></div>
          </div>
        </el-dialog>
      </template>
    </div>
  </ZwDialog>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import ZwDialog from '@/components/Dialog.vue'
  import { getOfficeAccountList } from '@/api/channelconfig/officeAccount'

  const emit = defineEmits(['submit'])
  const router = useRouter()
  const isShow = ref(false)
  const innerVisible = ref(false)
  const tabIndex = ref()
  const myScrollbar = ref()
  const checkedData = ref()
  const publicList = ref([
    {
      id: '',
      head_img: '',
      nick_name: '',
      service_type_info: -1,
      verify_type_info: -1
    }
  ])

  const checked = (id: number, row: any) => {
    checkedData.value = row
    tabIndex.value = id
  }
  const goOhterPage = () => {
    innerVisible.value = true
  }
  const onAddOfficeAccount = () => {
    router.push('/channelconfig/officeAccount/oaManage')
  }

  const getData = async () => {
    const params = {
      page: 1,
      page_size: 100,
      verify_type_info: 0
    }
    const res = await getOfficeAccountList(params)
    publicList.value = res.data
    console.log(res, '公众号数据')
  }

  const cancelHandel = () => {
    checkedData.value = ''
    tabIndex.value = ''
    isShow.value = false
  }
  const submitHandel = () => {
    emit('submit', { ...checkedData.value, ...{ id: tabIndex.value } })
    cancelHandel()
  }
  watch(
    () => isShow.value,
    (val) => {
      if (val) getData()
    }
  )

  const appDialog = reactive({
    visible: isShow,
    title: '选择公众号',
    width: '920px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
  })
  defineExpose({
    isShow,
    tabIndex,
    cancelHandel
  })
</script>

<style lang="scss" scoped>
  .public_box {
    padding: 14px 0;
    .explain_box {
      padding: 16px;
      box-sizing: border-box;
      background: #fffaf9;
      border-radius: 4px;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #33302d;
      line-height: 20px;
      margin-bottom: 16px;
    }
    :deep(.public_box) {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .public_item {
      width: 280px;
      height: 189px;
      cursor: pointer;
      padding: 16px;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 4px 8px 0px rgba(240, 240, 240, 0.5);
      border-radius: 4px;
      border: 1px solid #eaeaea;
      margin-right: 20px;
      margin-bottom: 16px;
      &:nth-of-type(3n) {
        margin-right: 0;
      }

      .info {
        display: flex;
        align-items: center;
        .avatar {
          width: 64px;
          height: 64px;
          margin-right: 12px;
        }
        .name {
          &_text {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #33302d;
            line-height: 22px;
          }
          .el-tag {
            font-size: 12px;
            color: #33302d;
            font-weight: 400;
            font-family: PingFangSC-Regular, PingFang SC;
            border: 1px solid #b5cffc;
            margin-top: 15px;
          }
        }
      }
      .property {
        display: flex;
        align-items: center;
        margin-top: 17px;
        &_item {
          display: flex;
          align-items: center;
          margin-right: 37px;
          font-size: 12px;
          font-weight: 400;
          color: #696969;
          line-height: 17px;
          img {
            width: 16px;
            height: 16px;
            margin-right: 6px;
          }
          &:last-of-type {
            margin-right: 0px;
          }
        }
      }
      .btn {
        width: 100%;
        margin-top: 24px;
        border-radius: 4px;
        color: #ff6b00;
        border: 1px solid #ff6b00;
        // position: absolute;
      }
      .activeBtn {
        color: #ffff;
      }
    }
    .addNew {
      position: relative;
      .add_content {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .add_icon {
          width: 24px;
          height: 24px;
          margin-bottom: 16px;
        }
        .add_text {
          font-size: 14px;
          font-weight: 400;
          color: #969696;
          line-height: 20px;
        }
      }
    }
    .active {
      border: 1px solid #ff6b00;
    }
  }
  // .app_dialogadd {
  //   .el-dialog__header {
  //     padding: 0px;

  //     .el-dialog__headerbtn {
  //       right: 30px;
  //       top: 15px;

  //       .el-dialog__close {
  //         font-size: 20px;
  //       }
  //     }
  //   }

  //   .footer {
  //     display: flex;
  //     justify-content: space-between;
  //     align-items: center;

  //     .text {
  //       font-size: 14px;
  //       font-family: STHeitiSC-Light, STHeitiSC;
  //       font-weight: 300;
  //       color: #969696;
  //       line-height: 14px;
  //     }
  //   }

  //   .el-dialog__body {
  //     padding: 10px 20px;
  //   }

  //   .dialog_header {
  //     height: 50px;
  //     display: flex;
  //     padding: 0 30px;
  //     align-items: center;
  //     font-size: 16px;
  //     font-family: PingFangSC-Medium, PingFang SC;
  //     font-weight: 500;
  //     color: #33302d;
  //     line-height: 16px;
  //     border-bottom: 1px solid #eaeaea;
  //   }

  //   .el-dialog__footer {
  //     height: 60px;
  //     box-sizing: border-box;
  //     padding: 10px 30px;
  //     border-top: 1px solid #eaeaea;

  //     .el-button {
  //       height: 36px;
  //       min-height: auto;
  //     }

  //     .upload_demo {
  //       display: inline-block;
  //       cursor: pointer;
  //     }
  //   }

  //   .ml20 {
  //     margin-left: 20px;
  //   }
  // }
  .empower {
    display: flex;
    align-items: center;
    flex-direction: column;
    .empower_image {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 60%;
      padding: 30px 0 38px;
      margin-left: 90px;
      // background-color: green;
      .empower_image_left {
        width: 64px;
        height: 64px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .empower_image_center {
        width: 68px;
        height: 68px;
        background: url('@/assets/smartMarketing/bind.png') no-repeat;
      }
      .empower_image_right {
        width: 157px;
        height: 37px;
        background: url('@/assets/login/login_log.png') no-repeat;
        background-size: 80% 80%;
      }
    }
    .empower_btn {
      height: 80px;
    }
    .empower_text {
      height: 60px;
    }
    .empower_border {
      width: 80%;
      height: 1px;
      background-color: #a9aaac;
      margin-top: 10px;
    }
    :deep .el-link--inner {
      color: #fff;
    }
  }
  .no_data {
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
      width: 75px;
      height: 51px;
    }
    .to_add {
      color: #ff6b00;
      cursor: pointer;
    }
  }
</style>
